<script setup lang="ts">
defineProps<{
}>()

</script>

<template>
  		<div class="thermometer">
			<div class="screen">
				<div class="temperature">
					23.8℃
				</div>
				<div class="spliter"></div>
				<div class="humidity">
					☺ 58%
				</div>
			</div>
		</div>
</template>

<style scoped>
	.thermometer {
		position: relative;
		width: 10em;
		height: 10em;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: center;
		perspective:110em;
		border-radius: 1.3em;	
		box-shadow: -0.4em -0.3em 0.1em 0.1em rgb(117, 117, 117);
		background-color: rgb(171, 171, 171 );
	}
	.thermometer .screen {
		width: 7em;
		height: 7em;
		background-color: rgb(104, 107, 88);
		border-radius: 0.5em;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.thermometer .screen .temperature {
		width: 4em;
		font-size: 1.6em;
		text-align: right;
		color: black;
	}
	.thermometer .screen .spliter {
		width: 80%;
		border: 0.2em solid black;
	}
	.thermometer .screen .humidity[data-v-f4ea442a] {
		font-size: 1.5em;
		text-align: right;
		color: black;
	}

</style>